<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>打地鼠游戏</title>
    <style type="text/css">
        .game {
            width:734px;
            height:600px;
            margin: 20px auto;
        }
        p {
            margin: 20px 5px;
            font-size: 20px;
            text-align: center;
        }
        .header1 {
            font-size: 16px;
        }
        .header2 {
            font-size: 21px;
            color: chocolate;
        }
        #gameBox{
            width: 500px;
            height: 500px;
            border: 2px solid #C5DC48;
            overflow: hidden;
            float: left;
        }
        #gameBox div{
            width: 98px;
            height: 98px;
            float: left;
            background-color:#C5DC48;
            border: 1px solid #C5DC48;
        }
        #gameBox div img {
            width: 97px;
        }
        #gameBox div button {
            margin: 0px;
            padding: 0px;
            width: 97px;
            height: 97px;
            overflow: hidden;
            border: none;
            outline: none; 
        }
        #gameBox div button:hover {
            cursor: pointer;
        }
        .gameControl {
            background-color:darkgray;
            width: 230px;
            height: 504px;
            float: left;
        }
        .gameControl input {
            margin: 20px 60px;
            padding: 6px 17px;
            font-size: 18px;
        }
        .gameControl input:hover {
            cursor:pointer;
        }
    </style>
</head>
<body>
    <div class="game">
        <!--规则说明区-->
        <p>
            <span class="header1">操作说明:成功敲击一次地鼠得一分,漏掉一只扣一分,当分数为-5或者漏掉10只地鼠的时候游戏结束。</span>
            <br/>
            <span class="header2">注意!游戏将随着时间的流逝越来越快!!来挑战最高分吧!!</span>
        </p>			
        <!--游戏区-->	
        <div id="gameBox">
            <div></div> <div></div> <div></div> <div></div> <div></div>
            <div></div> <div></div> <div></div> <div></div> <div></div>
            <div></div> <div></div> <div></div> <div></div> <div></div>
            <div></div> <div></div> <div></div> <div></div> <div></div>
            <div></div> <div></div> <div></div> <div></div> <div></div>
        </div>
        <!--控制区-->
        <div class="gameControl">
            <input type="button" id="start" onclick="startPause()" value="开始游戏" />
            <input type="button" id="over"  onclick="gameStop()"  value="结束游戏" />
            <input type="button" id="again" onclick="restart()" value="重新开始" />
            <p id="timer"></p>
            <p id="number"> </p>
            <p id="miss"> </p>
            <p id="score"> </p>					
        </div>
    </div>
    <script>
        var timer = document.getElementById("timer");
        var number = document.getElementById("number");
        var miss = document.getElementById("miss");
        var score = document.getElementById("score");
        var start = document.getElementById("start");
        var gameBox = document.getElementById("gameBox").getElementsByTagName("div");
        var mm =0;
        var ss =0;
        var speed = 3000;//地鼠出现的时间，speed越短，速度越快
        var str;
        var timerStart;
        var numb;
        var numbe =0;//老鼠出现的个数
        var hitMouse=0;//打中老鼠的的个数
        var missMouse=0;//漏掉老鼠的个数
        var mouse1;
        var mouse2;
        var scoreMouse;
       
        
       //打地鼠
        
       
        //随机出现的老鼠
        function mouse() {    
            var num = Math.floor(Math.random()*25); 
            numb = num;//局部变量传到全局变量
            gameBox[num].innerHTML = '<button onclick="remove()"><img src="./img/01.jpg" alt="地鼠出现图片"></button>';             
            number.innerHTML="地鼠出现的次数："+ ++numbe;
            missMouse = numbe - hitMouse;
            miss.innerHTML = "漏掉的地鼠：" + missMouse;
            score.innerHTML = "得分："+ hitMouse; 
            
            mouse1=setTimeout(disappear,1000);
            function disappear(){
                gameBox[num].innerHTML = "";
            }   
            speed=speed-20;
            speed<450?450:speed;
            mouse2=setTimeout(mouse,speed);  
            if(hitMouse>10){
            timerStop();
            restart();
            alert("您已超神，请挑战下一个游戏吧"); 
            }  
        }  
        function remove(){
            gameBox[numb].innerHTML = '<button><img src="./img/02.jpg" alt="地鼠被打图片"></button>';
            hitMouse++;
        } 
        //计时器开始   
        function timStart(){
            if(mm==0){
                timer.innerHTML="游戏进行了：0:00";
            }
            timerStart = setInterval(tips,1000);

        function tips(){         
            mm++;
            if(mm<10){
                mm="0"+mm;
            }           
            else if(mm>60) {
                mm=0;
                ss++;
                if(ss<10) {
                    ss="0"+ss;
                }
                else if(ss>60) {
                    ss=0;
                    mm=0;
                }
            }
            str = ss +":"+ mm;
            timer.innerHTML="游戏进行了："+ str;
        } 
    } 
        //计时暂停
        function timerStop() {
            window.clearInterval(timerStart);
            window.clearTimeout(mouse1);
            window.clearTimeout(mouse2);
        }  
        //重新开始游戏
        function restart(){
            start.value="开始游戏" ;
            timerStop();
            mm=ss=0;
            numbe = hitMouse = 0;
            gameBox[numb].innerHTML = "";
            timer.innerHTML = "";
            number.innerHTML = "";
            miss.innerHTML = "";      
            score.innerHTML = "";
        }
        //游戏停止
        function gameStop(){
            timerStop();
            mm=ss=0;
            //内容清空
            restart();
            alert("您的当前得分是：" + hitMouse);
        }
        function startPause() {
            if(start.value=="开始游戏"){
                start.value="暂停游戏";
                timStart();
                miss.innerHTML = "漏掉的地鼠：";      
                score.innerHTML = "得分：";
                mouse();
            }
            else if(start.value=="暂停游戏"){
                start.value="开始游戏" ;
                timerStop();
                gameBox[numb].innerHTML = "";   
            }
        }
       
    </script>
</body>
</html> 